Creating a launcher icon with Adobe Photoshop template 1

Note: The necessary template file is available in the Nokia Icon Toolkit.

The 1_S40_FT_Launcher_Icon_Photoshop_Template_PRECAST.psd template is most useful if your logo or icon graphic consists of a single basic shape. You can then simply paste this shape on top of the pre-designed icon backgrounds provided in the template.

To use the template, please follow the steps below.

Create the core shape

Open the 1_S40_FT_Launcher_Icon_Photoshop_Template_PRECAST.psd.

In the Layer Palette (press F7 if it is not visible), select the layer PLACE YOUR GLYPH HERE and draw or paste your graphic directly on that layer.

Activate the guides visibility (CTRL + ;) and draw or place your core icon shape inside the 30 x 30 pixel construction zone as indicated by the guides. Fill as much of the construction zone as possible with your icon, but do so in a way that feels balanced.

Scale the graphic

Scale your glyph to fit the dimensions of the focal zone, and place it within the centre of the zone as indicated by the guides. Press the "Shift" key while you do so to ensure that the graphic scales proportionally.

(If you have not done so already, set the colour of your graphic to white (or another suitable colour), which ensures a good level of contrast between the glyph and the background.)

Remember: Elongated elements may overhang the recommended focal zone by a few pixels.

Figure 1.

Figure 2.

Apply layer style

By default, the layer PLACE YOUR GLYPH HERE (work layer) provides the correct layer style for Series 40 full touch launcher icon production. Draw or paste your icon on this layer to ensure that the correct gradient and the correct drop shadow will be applied automatically.

If you place or import your glyph from an external document, Photoshop will place it on a separate new layer. To apply the layer style correctly, drag the layer style (fx) from the work layer onto the new layer.

Figure 3.

With the graphic placed on the correct layer, the correct gradient and drop shadow are automatically applied.

Apply background

The Photoshop template 1 includes a variety of precast coloured backgrounds that you can choose from. To activate a background, click the “eye” indicator next to your chosen item in the layers palette. Deactivate any not needed colour layers to prevent cross colouring effects.

Figure 4.

The icon design is now complete. The final step is to output your icon as a PNG file.

Save as PNG

Select File > Save for Web & Devices, apply the settings shown in the screenshot below, and click Save. Respond to the dialogue to save your PNG icon in the directory of your choice. The icon is now ready for implementation.

Figure 5.

Be sure to keep a copy of the Photoshop file in case changes are required at a later date. If you want to produce another icon, please open the 1_S40_FT_Launcher_Icon_Photoshop_Template_PRECAST.psd again, and use a new file for each icon.

Note: The final PNG icon size should not exceed 30 kb. If your launcher icon is bigger, consider redrawing your icon with Illustrator or Inkscape.